<script setup>
import { computed, ref } from 'vue'
const vegs = ref([
    {
        id: 1,
        name: 'Carrot',
        img: "https://images.pexels.com/photos/4353638/pexels-photo-4353638.jpeg?auto=compress&cs=tinysrgb&w=1600",
        price: 0.5,
        selected: false,
    },
    {
        id: 1,
        name: 'Carrot',
        img: "https://images.pexels.com/photos/4353638/pexels-photo-4353638.jpeg?auto=compress&cs=tinysrgb&w=1600",
        price: 0.5,
        selected: false,
    }, {
        id: 1,
        name: 'Carrot',
        img: "https://images.pexels.com/photos/4353638/pexels-photo-4353638.jpeg?auto=compress&cs=tinysrgb&w=1600",
        price: 0.5,
        selected: false,
    }
]);
const isSelectedAll = computed(() => {
    return vegs.value.every(veg => veg.selected);
})
const clickSelectAll = () => {
    if (isSelectedAll.value) {
        vegs.value.forEach(veg => veg.selected = false)
    } else {
        vegs.value.forEach(veg => veg.selected = true)
    }
}
const totalPriceAmount = computed(() => {
    return vegs.value.filter(veg => veg.selected).reduce((total, veg) => total + veg.price, 0);
    // let totalPrice = 0;
    // for ( let i = 0; i < vegs.value.length; i++) {
    //     if (vegs.value[i].selected) {
    //         totalPrice += vegs.value[i].price;
    //     }
    // }
    // return totalPrice;
})
</script>

<template>
    <div class="body">
        <div class="menu" v-for="veg in vegs" :key="veg.id">
            <div class="menuItem">
                <input type="checkbox" class="menuItemSelect" v-model="veg.selected">
                <img class="menuItemImg" :src="veg.img" alt="">
                <div class="menuItemInfo">
                    <div class=" menuItemName">{{ veg.name }}</div>
                    <div class=" menuItemPrice">
                        ¥ {{ veg.price }}
                    </div>
                </div>
            </div>
        </div>
        <div class="total">
            <div class="totalSelect">
                <input id="selectAll" type="checkbox" v-model="isSelectedAll" @click="clickSelectAll()"><label
                    for="selectAll">全选</label>
            </div>
            <div class="totalPrice">
                合计：¥ {{ totalPriceAmount }}
            </div>

            <button class="totalBuy">
                Buy
            </button>
        </div>
    </div>
</template>

<style scoped>
.menuItem {
    display: flex;
    flex-flow: row nowrap;
    margin-top: 20px;
}

.menuItemSelect {
    margin-left: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid gray;
    border-radius: 50%;
    align-self: center;
}

.menuItemImg {
    margin-left: 10px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

.menuItemInfo {
    margin-left: 10px;
    display: flex;
    flex-flow: column nowrap;
}

.menuItemName {
    font-size: 20px;
    flex: 1;

}

.menuItemPrice {
    width: 100px;
    color: red;
    font-size: 20px;
}

.total {
    display: flex;
    flex-flow: row nowrap;
    height: 100px;
    background-color: aquamarine;
    align-items: center;
}

.totalSelect {
    flex: auto;
}

.totalPrice {}

.totalBuy {
    margin-left: 20px;
    width: 100px;
    height: 50px;
    border-radius: 5px;
}
</style>